<div class="loader">Loading...</div>
<style>
body {
   background:#090;
   margin:50px;
}

.loader {
   text-indent: -9999em;
   position: relative;
   width: 200px;
   height: 200px;
   background: #ffffff;

   /*从左向右0~10%位置纯白，10%~50%纯白~透明*/
   background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0)  50%);
   border-radius: 50%;
   box-shadow:inset 0 0 0 20px rgba(255,255,255,.2);
   -webkit-animation: load-effect 2s infinite linear;
   animation: load-effect 2s infinite linear;
}




/*绘制纯白1/4圆*/

.loader::before {
   position: absolute;
   content: '';
   width: 50%;
   height: 50%;
   background: #FFF;
   border-radius: 100% 0 0 0;

   
   left:0;
   top:0;
}

 

/*绘制绿色背景内圆，挡住白色*/
.loader::after  {
   background: #090;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   content: '';
   position: absolute;
   top: 20px;
   left: 20px;
}

@keyframes load-effect {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}
</style>
